<script lang="ts">
import { defineComponent, ref } from 'vue'
import { getViewAboutInitData } from "@/api/init"
import { useHead } from '@vueuse/head'

export default defineComponent({
  methods: {
    onButtonClick() {
      this.count++
    }
  },
  created() {
    useHead({
      title: this.state.nvc_title,
      meta: [{
        name: "description", content: this.state.nvc_abstract
      }, {
        name: "keywords", content: this.state.nvc_keywords
      }]
    })
  },
  async setup() {
    const count = ref(0)
    // setup异步函数直接同步请求数据后进行SSR渲染
    const state = await getViewAboutInitData()
    return {
      count,
      state
    }
  }
})
</script>

<template>
  <div class="view-about">
    <div>
      这是关于 <button @click="onButtonClick">{{ count }}</button>
    </div>
    <p>
      {{ state }}
    </p>
  </div>
</template>

<style scoped lang="less">
.view-about {
  padding: 24px;
}
</style>
